<template>
	<my-field :label="data.label" :needRightIcon="false">
		<view class="float-right">
			<u-checkbox-group
				v-if="data.config.isRemote"
				v-model="obj.value"
				activeColor="#2d58cb"
				:disabled="data.readonly"
			>
				<view class="w-full grid" :class="remoteDataLen > 3? ['grid-cols-3 gap-3']:['grid-cols-' + remoteDataLen]">
					<u-checkbox
						v-for="(option,index) in remoteData"
						:key="index"
						:label="option[data.config.remoteDataProps.label]"
						:name="option[data.config.remoteDataProps.value]"
					>
					</u-checkbox>
				</view>
			</u-checkbox-group>
			<u-checkbox-group
				v-else
				v-model="obj.value"
				activeColor="#2d58cb"
				:disabled="data.readonly"
			>
				<view class="w-full grid" :class="data.selections.length > 3? ['grid-cols-3 gap-3']:['grid-cols-' + data.selections.length]">
					<u-checkbox
						v-for="option in data.selections"
						:key="option.value"
						:label="option.label"
						:name="option.value"
					>
					</u-checkbox>
				</view>
			</u-checkbox-group>
		</view>
	</my-field>
</template>
<script>
import RemoteMixin from '../js/remote-mixin'
import MyField from '@/pages_form/components/my-field.vue'
export default {
	mixins: [ RemoteMixin ],
	components: {MyField},
    props: {
        data: {
            type: Object,
            required: true
        }
    },
	data() {
		return {
			remoteDataLen: 0,
			obj: JSON.parse(JSON.stringify(this.data))
		}
	},
	watch:{
		obj: {
		   deep: true,
		   handler() {
			   this.$emit('fieldValueChange', this.obj)
		   }
		},
		remoteData: {
    	   deep: true,
    	   handler() {
    		  this.remoteDataLen = this.remoteData.length
    	   }
		},
	},
}
</script>
<style scoped>
.self-cell >>> .van-cell__title {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 6.2em;
    margin-right: 12px;
    color: #646566;
    text-align: left;
    word-wrap: break-word;
}
.self-cell >>> .van-checkbox:not(:last-child) {
    padding-bottom: 8px;
}

.self-cell__readonly >>> .van-checkbox--disabled .van-checkbox__label--disabled {
    color: #323233;
}
.self-cell__readonly >>> .van-checkbox__icon--disabled .van-icon {
    color: #fff;
    background-color: #1989fa;
    border-color: #1989fa;
}
</style>
